<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/carousel.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/carousel.js"></script>
    <script src="js/myscirpt.js"></script>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="header">
        <div class="header_content">
            <div class="header_left">
                <img src="img/logo.svg" alt="">
            </div>
            <div class="header_mid">
                <ul>
                    <li><a href=""><span>首页</span></a></li>
                    <li>
                        <a href=""><span>发现</span></a>
                        <div class="menu_list discover_box">
                            <div class="discover_list">
                                <div>
                                    <a href=""><span>平面</span></a>
                                </div>
                                <div>
                                    <a href=""><span>平面</span></a>
                                </div>
                                <div>
                                    <a href=""><span>平面</span></a>
                                </div>
                                <div>
                                    <a href=""><span>平面</span></a>
                                </div>
                                <div>
                                    <a href=""><span>平面</span></a>
                                </div>
                                <div>
                                    <a href=""><span>平面</span></a>
                                </div>
                                <div>
                                    <a href=""><span>平面</span></a>
                                </div>
                                <div>
                                    <a href=""><span>平面</span></a>
                                </div>
                                <div>
                                    <a href=""><span>平面</span></a>
                                </div>
                                <div>
                                    <a href=""><span>平面</span></a>
                                </div>
                                <div>
                                    <a href=""><span>平面</span></a>
                                </div>
                                <div>
                                    <a href=""><span>平面</span></a>
                                </div>
                                <div>
                                    <a href=""><span>平面</span></a>
                                </div>
                                <div>
                                    <a href=""><span>平面</span></a>
                                </div>
                                <div>
                                    <a href=""><span>平面</span></a>
                                </div>
                                <div>
                                    <a href=""><span>平面</span></a>
                                </div>
                            </div>
                            <div class="discover_importent">
                                <a href=""><span>精选收藏</span></a>
                                <a href=""><span>精选收藏</span></a>
                                <a href=""><span>精选收藏</span></a>
                            </div>
                        </div>
                    </li>
                    <li><a href=""><span>同城</span></a></li>
                    <li>
                        <a href=""><span>职位</span></a>
                        <div class="menu_list">
                            <ul>
                                <li><a href=""><span>职位</span></a></li>
                                <li><a href=""><span>公司</span></a></li>
                                <li><a href=""><span>发布职位</span></a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href=""><span>活动</span></a>
                        <div class="menu_list">
                            <ul>
                                <li><a href=""><span>设计大赛</span></a></li>
                                <li><a href=""><span>专题策划</span></a></li>
                                <li><a href=""><span>线下活动</span></a></li>
                                <li><a href=""><span>线上活动</span></a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href=""><span>素材</span></a></li>
                    <li><a href=""><span>课程</span></a></li>
                </ul>
            </div>
            <div class="header_right">
                <span>登录</span>
                <span>|</span>
                <span>注册</span>
            </div>
        </div>
    </div>
    <!-- 轮播区域 -->
    <div class="banner">
            <!-- 轮播的区域 -->
            <ul class="banner_img">
             <li><a href="#"><img src="img/lunbo1.png" alt="第1张图片"></a></li>
             <li><a href="#"><img src="img/lunbo2.png" alt="第2张图片"></a></li>
             <li><a href="#"><img src="img/lunbo3.png" alt="第3张图片"></a></li>
             <li><a href="#"><img src="img/lunbo4.png" alt="第4张图片"></a></li>	
             <li><a href="#"><img src="img/lunbo5.png" alt="第5张图片"></a></li>
             
            </ul>
            <!-- 轮播圆点的提示 -->
            <!-- <ul class="banner_circle"></ul>  -->
            <!-- 两个向前向后的按钮 -->
            <div class="banner_btn">
             <span class="banner_prev">&lt;</span>
             <span class="banner_next">&gt;</span>
           </div>
    </div>
    <!-- 图标区域 -->
    <div class="icons">
        <div class="icons_content">
            <div class="icons_box">
                <div class="icons_img">
                    <img src="img/11.jpg" alt="">
                </div>
            </div>
            <div class="icons_box">
                <div class="icons_img">
                    <img src="img/12.jpg" alt="">
                </div>
            </div>
            <div class="icons_box">
                <div class="icons_img">
                    <img src="img/13.jpg" alt="">
                </div>
            </div>
            <div class="icons_box">
                <div class="icons_img">
                    <img src="img/1.jpg" alt="">
                </div>
            </div>
            <div class="icons_box">
                <div class="icons_img">
                    <img src="img/15.jpg" alt="">
                </div>
            </div>
            
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="wrap">
        <div class="wrap_header">
            
                <span><a href="">首页推荐</a></span>
                <span><a href="">最新发布</a></span>
                <span><a href="">上升最快</a></span>
            
        </div>
        <div class="wrap_content">
            <div class="wrap_list">
                <div class="wrap_list_content">
                    <div class="wrap_box">
                        <div class="wrap_box_content">
                            <div class="wrap_box_img">
                                <a href=""><img src="img/16.jpg" alt=""></a>
                            </div>
                            <div class="wrap_box_info">
                                <p class="wrap_box_info_title">
                                    <a href="">标题</a>
                                </p>
                                <p class="wrap_box_info_type">文章-观点-多领域</p>
                                <p class="wrap_box_info_item">
                                    <span class="iconfont icon-yanjing" title="共1234人气">1234</span>
                                    <span class="iconfont icon-pinglun" title="共234评论">234</span>
                                    <span class="iconfont icon-zan" title="共12点赞">12</span>                                    
                                </p>
                            </div>
                            <div class="wrap_box_item">
                                <span class="author">
                                    <a href="">
                                        <img src="" alt="">
                                        作者
                                    </a>
                                    <div class="author-info-card">
                                        <div class="author-card-box">
                                            <div class="author-card_topbar">
                                            <div class="author-card_info">
                                                <div class="avatar-container-40">
                                                <a href="https://luyaosuvan.zcool.com.cn" title="路遥Suvan" target="_blank" class="avatar-container_face">
                                                    <img src="https://img.zcool.cn/community/004bee59269709b5b3086ed469b5a8.jpg@80w_80h_1c_1e_1o_100sh.jpg">
                                                </a>
                                                
                                                </div>
                                                <div class="ml-10">
                                                <div class="author-card_title">
                                                    <a href="https://luyaosuvan.zcool.com.cn" title="路遥Suvan" target="_blank" class="author-card_title-name">路遥Suvan</a>
                                                    <div class="author-card_honor-medal">
                                                    
                                                    </div>
                                                </div>
                                                <div class="author-card_position" title="北京 | 摄影师">
                                                    北京&nbsp;|
                                                    
                                                    摄影师
                                                    
                                                </div>
                                                </div>
                                            </div>
                                            <div>
                                                <div class="js-project-focus-btn">
                                                
                                                <input type="button" title="添加关注" class="btn-current-h30 btn-default-main  attention notfollow" value="关注" z-st="follow">
                                                
                                                <div class="js-focus-loadding-btn focus-loadding-y hide"><div></div><div></div><div></div></div></div>
                                            </div>
                                            </div>
                                            <div class="author-card_products_box">
                                                <a href="https://www.zcool.com.cn/work/ZNDIwODk1MDg=.html" target="_blank" class="card-img-hover">
                                                <img src="https://img.zcool.cn/community/01ded25e13eeb0a801216518a9da4e.jpg@260w_195h_1c_1e_1o_100sh.jpg">
                                                </a>
                                                <a href="https://www.zcool.com.cn/work/ZNDE2MzU3MzI=.html" target="_blank" class="card-img-hover">
                                                <img src="https://img.zcool.cn/community/01ac315e008bdca80120a8957c6301.jpg@260w_195h_1c_1e_1o_100sh.jpg">
                                                </a>
                                                <a href="https://www.zcool.com.cn/work/ZNDE0MjIwOTY=.html" target="_blank" class="card-img-hover">
                                                <img src="https://img.zcool.cn/community/01d36c5def32e2a8012095689acc0d.jpg@260w_195h_1c_1e_1o_100sh.jpg">
                                                </a>
                                            </div>
                                            <div class="mt-10">
                                            <a href="https://luyaosuvan.zcool.com.cn" target="_blank" class="statistics-popularity mr-10 link">816545</a>
                                            <a href="https://luyaosuvan.zcool.com.cn" target="_blank" class="statistics-creation mr-10 link">21</a>
                                            <a href="https://luyaosuvan.zcool.com.cn/fans" target="_blank" class="statistics-fans link">4805</a>
                                            </div>
                                      </div>
                                    </div>
                                </span>
                                <span class="time">16小时前</span>
                            </div>
                        </div>
                    </div>
                    <div class="wrap_box">
                        <div class="wrap_box_content">
                            <img src="img/17.jpg" alt="">
                        </div>
                    </div>
                    <div class="wrap_box">
                        <div class="wrap_box_content">
                            <img src="img/18.jpg" alt="">
                        </div>
                    </div>
                    <div class="wrap_box">
                        <div class="wrap_box_content">
                            <img src="img/19.jpg" alt="">
                        </div>
                    </div>
                    <div class="wrap_box">
                        <div class="wrap_box_content">
                            <img src="img/20.jpg" alt="">
                        </div>
                    </div>
                    
                    
                </div>
                <div class="wrap_list_content">
                        <div class="wrap_box">
                                <div class="wrap_box_content">
                                    <img src="img/21.jpg" alt="">
                                </div>
                            </div>
                            <div class="wrap_box">
                                <div class="wrap_box_content">
                                    <img src="img/22.jpg" alt="">
                                </div>
                            </div>
                            <div class="wrap_box">
                                <div class="wrap_box_content">
                                    <img src="img/23.jpg" alt="">
                                </div>
                            </div>
                            <div class="wrap_box">
                                <div class="wrap_box_content">
                                    <img src="img/24.jpg" alt="">
                                </div>
                            </div>
                            <div class="wrap_box">
                                <div class="wrap_box_content">
                                    <img src="img/25.jpg" alt="">
                                </div>
                            </div>
                </div>
                <div class="wrap_list_content">
                    <div class="wrap_box">
                        <div class="wrap_box_content">
                            <img src="img/26.jpg" alt="">
                        </div>
                    </div>
                    <div class="wrap_box">
                        <div class="wrap_box_content">
                            <img src="img/27.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 回到顶部区域 -->
    <div class="backTop">
        <span>回到顶部</span>
    </div>
</body>
</html>